import React, { memo, useState } from "react";
import { DatePicker } from "antd";
import { render } from "@testing-library/react";
//React.memo是React16.6新的api 用来缓存组件的渲染，避免不必要的更新，其实是一个高阶组件 只能用于函数式组件

function MyComponent({ children }) {
  const modifiedChildren = React.Children.map(children, (child) => {
    return React.cloneElement(child, {
      style: { color: "red", fontSize: "100px" },
    });
  });
  return <div>{modifiedChildren}</div>;
}

function RadioOption(props) {
  const [array1, setArray1] = useState([
    "惠妹yyds",
    null,
    "啊嘞",
    null,
    undefined,
    "啊哈哈",
  ]);
  const [array2, setArray2] = useState([
    <div key="1">Item 1 惠妹</div>,
    null,
    <div key="2">Item 2 惠妹</div>,
    undefined,
    <div key="3">Item 3 惠妹</div>,
  ]);

  const newReactChildren = React.Children.map(array2, (child) => {
    return child ? child: null;
  });
  console.log(newReactChildren, "React.Children.map");

  const newArray = array2.map((item) => item + 1);
  console.log(newArray, "map");

  return (
    <label>
      <input type="radio" value={props.value} name={props.name} />
      {props.label}----{props.name}
    </label>
  );
}

function renderChildren(props) {
  return React.Children.map(props.children, (child) => {
    if (child.type === RadioOption)
      return React.cloneElement(child, { name: props.name });
    else return child;
  });
}
function RadioGroup(props) {
  return <div>{renderChildren(props)}</div>;
}
const test = memo((props) => {
  return (
    <>
      <DatePicker />
      <MyComponent>
        <span>Hello</span>
        <span>惠妹</span>
      </MyComponent>
      <RadioGroup name="惠妹">
        <RadioOption label="one" value="1" />
        <RadioOption label="two" value="2" />
        <RadioOption label="three" value="3" />
      </RadioGroup>
    </>
  );
});

export default test;
